import { useRecoilValue } from "recoil";

import { currentUserInfoQuery } from "./store";
import UserInfo from "./UserInfo";

export default function CurrentUserInfoLoadable() {
  const currentUser = useRecoilValue(currentUserInfoQuery);

  return (
    <div>
      <h1>Without Suspense</h1>
      <h2>{currentUser.name}</h2>
      <ul>
        {currentUser.friends.map((id) => (
          <UserInfo userId={id} />
        ))}
      </ul>
    </div>
  );
}
